<template>
  <div class="top">
    <div class="lefBox">
      <div class="carousel">
        <img :src="mainImage" alt="Main Image" class="left-image" @click="nextSlide"/>
        <div class="right-images-container">
          <div v-for="(image, index) in sliderContent"
               :key="index" class="right-img">
            <img

                :class="{ active: index === currentIndex,'small-image': true}"
                :src="imageBaseUrl+image.picUrl"
                @click="changeMainImage(image)"
            />
          </div>
        </div>
      </div>
      <div class="center">
        <div v-if="topBooks.length>0" class="hot_articles">
          <div class="hot_content">
            <el-row>
              <el-col :span="24" class="hot_title">
                <a v-if="topBooks[0]" href="javascript:void(0)"
                   @click="bookDetail(topBooks[0].bookId)">{{ topBooks[0].bookName }}</a>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <a v-if="topBooks[1]" href="javascript:void(0)"
                   @click="bookDetail(topBooks[1].bookId)">{{ topBooks[1].bookName }}</a>
              </el-col>
              <el-col :span="12">
                <a v-if="topBooks[0]" href="javascript:void(0)"
                   @click="bookDetail(topBooks[2].bookId)">{{ topBooks[2].bookName }}</a>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <a v-if="topBooks[3]" href="javascript:void(0)"
                   @click="bookDetail(topBooks[3].bookId)">{{ topBooks[3].bookName }}</a>
              </el-col>
              <el-col :span="12">
                <a v-if="topBooks[4]" href="javascript:void(0)"
                   @click="bookDetail(topBooks[4].bookId)">{{ topBooks[4].bookName }}</a>
              </el-col>
            </el-row>
          </div>
          <div class="hot_content">
            <el-row>
              <el-col :span="24" class="hot_title"><a v-if="topBooks[5]" href="javascript:void(0)"
                                                      @click="bookDetail(topBooks[5].bookId)">{{ topBooks[5].bookName }}</a></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <a v-if="topBooks[6]" href="javascript:void(0)"
                   @click="bookDetail(topBooks[6].bookId)">{{ topBooks[6].bookName }}</a>
              </el-col>
              <el-col :span="12">
                <a v-if="topBooks[7]" href="javascript:void(0)"
                   @click="bookDetail(topBooks[7].bookId)">{{ topBooks[7].bookName }}</a>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <a v-if="topBooks[8]" href="javascript:void(0)"
                   @click="bookDetail(topBooks[8].bookId)">{{ topBooks[8].bookName }}</a>
              </el-col>
              <el-col :span="12">
                <a v-if="topBooks[9]" href="javascript:void(0)"
                   @click="bookDetail(topBooks[9].bookId)">{{ topBooks[9].bookName }}</a>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--最新资讯-->
        <LatestNews/>
      </div>
    </div>

    <div class="rightBox">
      <div id="weekcommend" class="title">
        <div>本周强推</div>
      </div>
      <div class="content">
        <el-row v-for="(book, index) in weekcommend" :key="index">
          <el-col :span="24">
            <i :class="['i'+Number(index)]">{{ index + 1 }}</i>
            <a class="book-name" href="javascript:void(0)" @click="bookDetail(book.bookId)">{{ book.bookName }}</a>
          </el-col>
          <el-col v-if="index==0" :span="24">
            <div class="book-info" @click="bookDetail(book.bookId)">
              <img :src="imageBaseUrl+book.picUrl" alt="Book Cover" class="book-image"/>
              <span>{{ book.bookDesc }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>


  </div>
</template>
<script lang="ts" setup>
import {computed, onMounted, onUnmounted, type PropType, ref, toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
import LatestNews from "@/components/home/LatestNews.vue";

// const imageBaseUrl = ref(process.env.VITE_APP_BASE_IMG_URL);
const imageBaseUrl = ref(import.meta.env.VITE_APP_BASE_IMG_URL);
const router = useRouter();
const route = useRoute();

interface SliderContent {
  picUrl: string;
  bookId: number;
}

interface TopBooks {
  /* 类型;0-轮播图 1-顶部栏 2-本周强推 3-热门推荐 4-精品推荐 */
  type: number;

  /* 小说ID */
  bookId: number;

  /* 小说封面地址 */
  picUrl: string;

  /* 小说名 */
  bookName: string;

  /* 作家名 */
  authorName: string;

  /* 书籍描述 */
  bookDesc: string;
}

interface WeekCommend {
  /* 类型;0-轮播图 1-顶部栏 2-本周强推 3-热门推荐 4-精品推荐 */
  type: number;

  /* 小说ID */
  bookId: number;

  /* 小说封面地址 */
  picUrl: string;

  /* 小说名 */
  bookName: string;

  /* 作者名 */
  authorName: string;

  /* 书籍描述 */
  bookDesc: string;
}

const props = defineProps({
  topBooks: {
    type: Array as PropType<TopBooks[]>,
    default: () => []
  },
  sliderContent: {
    type: Array as PropType<SliderContent[]>,
    default: () => []
  },
  weekcommend: {
    type: Array as PropType<WeekCommend[]>,
    default: () => []
  }
});

const {topBooks, sliderContent} = toRefs(props);
console.log(topBooks.value);
// 修改后的代码部分
const firstValidImageIndex = computed(() => {
  return sliderContent.value.findIndex(content => content.picUrl);
});

const currentIndex = ref(firstValidImageIndex.value >= 0 ? firstValidImageIndex.value : 0);
const mainImage = ref(sliderContent.value[currentIndex.value] ? imageBaseUrl.value + sliderContent.value[currentIndex.value].picUrl : imageBaseUrl.value + '/image/default.jpg');
console.log(mainImage.value)
// 自动轮播
let intervalId: ReturnType<typeof setInterval> | null = null;

onMounted(() => {
  intervalId = setInterval(() => {
    nextSlide();
  }, 3000); // 每3秒切换一次
});

onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
});

function nextSlide() {
  currentIndex.value = (currentIndex.value + 1) % sliderContent.value.length;
  mainImage.value = imageBaseUrl.value + sliderContent.value[currentIndex.value]?.picUrl || '';
}

function changeMainImage(image: SliderContent) {
  currentIndex.value = sliderContent.value.findIndex(i => i.bookId === image.bookId);
  console.log(currentIndex.value)
  mainImage.value = imageBaseUrl.value + image.picUrl;
}

const bookDetail = (bookId: any) => {
  router.push({path: `/book/${bookId}`});
};


</script>


<style lang="scss" scoped>
.top {
  width: 60%;
  margin: 0 auto;
  padding: 10px;
  background-color: #FFFFFF;
  display: flex;
  box-sizing: border-box;

  .lefBox {
    flex: 3;
    //border: 1px solid blue;
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    /*轮播图样式*/
    .carousel {
      //border: 1px solid #000;
      display: flex;
      flex: 3;
      /*左侧图片*/
      .left-image {
        flex: 4;
        width: 70%;
        //height: 350px;
        object-fit: cover; /* 保持图像纵横比并填满盒子 */
        background-color: #f0f0f0; /* 如果没有图片时作为背景色 */
        padding: 5px;
        //border: 1px solid #000;
      }

      /*右侧小图父盒子*/
      .right-images-container {
        //height: 350px;
        background-color: #f0f0f0;
        flex: 1;
        //border: 1px solid #000;
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .right-img {
          //width: 100%;
          cursor: pointer;

          &:hover {
            border: 2px solid red;
          }
        }

        .right-img.active {
          border: 2px solid red;
        }

        //
        .right-img img {
          box-sizing: border-box;
          flex-grow: 1;
          width: 100%;
          height: calc(80px); /* 左侧大图片高度的四分之一 */
          object-fit: cover;
          //设置图片盛满盒子
          box-sizing: border-box;
        }
      }
    }

    .center {
      padding: 10px;
      flex: 4;
      display: flex;
      flex-direction: column;
      //justify-content: space-around;
      //border: 1px solid #000;
      box-sizing: border-box;

      .hot_articles {
        //border: 1px solid #000;
        display: flex;
        flex-direction: column;

        .hot_content {
          border-bottom: 1px dotted #eae6e2;
          padding-bottom: 10px;
          margin-bottom: 20px;
        }

        .el-col {
          //font-size: 14px;
          //padding-left: 10px;
          text-align: left;
          line-height: 30px;

          a {
            text-decoration: none;
            font-size: 15px;
            font-weight: bold;
            color: #333;;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        .hot_title {
          text-align: center;

          a {
            //加粗
            font-weight: 600;
            color: #F70;
            font-size: 16px;
          }
        }
      }
    }
  }


  .rightBox {
    flex: 1;
    width: 100%;
    //border: 1px solid greenyellow;
    display: flex;
    flex-direction: column;
    //align-items: flex-start;
    text-align: left;
    /*辩题*/
    .title {
      padding: 10px;
      //border: 1px solid #000;
      font-size: 25px;
      font-weight: bold;
      border-bottom: 1px solid #eae6e2;
      //margin: 10px;
    }

    .content {
      .el-col {
        display: flex;
        flex-direction: row;
        padding: 10px;

        i {
          display: block;
          background-color: red;
          width: 20px;
          height: 20px;
          text-align: center;
          color: #F5F5F5;
          //垂直居中
          line-height: 20px;
          background-color: #989898;
          margin-right: 10px;
        }

        .i0 {
          background-color: #F9701B;
        }

        .i1 {
          background-color: #F59022;
        }

        .i2 {
          background-color: #FDA560;
        }

        .book-name {
          /*清除a标签样式*/
          text-decoration: none;
          color: #333;
          font-weight: bold;

          &:hover {
            text-decoration: underline;
            color: #F70;
            cursor: pointer;
          }
        }

      }

      .book-info {
        display: flex;
        height: 100px;
        width: 100%;
        overflow: hidden;
        background-color: #F7F7F7;
        padding: 10px;

        .book-image {
          width: 60px;
          height: 100px;
          object-fit: cover;
        }

        span {
          padding-left: 10px;
          font-size: 14px;
          overflow: hidden;
          line-height: 20px;
          color: #A5A5C0;
        }
      }
    }
  }
}

</style>